<script lang="ts" setup>

import { computed, onMounted, ref } from 'vue'

import {getUserList,blackUser} from '@/api/yonghu/yonghu'

const currentPage4 = ref(1)
const total = ref('')

const pageSize4 = ref(5)



//获取数据
const data=ref([])
onMounted(()=>{
    get()
})

function get(){
  getUserList(currentPage4.value,pageSize4.value).then(res=>{
    data.value=Object.values(res.data.data)
    total.value=res.data.total
  })
}

const handleSizeChange = (val: number) => {
    get()
}
const handleCurrentChange = (val: number) => {
  get()
}






//拉黑用户功能
const handleDelete = (index: number, row: any) => {
  blackUser(row.id).then(res=>{
        console.log(res);
        
  })
}



</script>

<template>

    <!-- 表格 -->
    <el-table :data="data" style="width: 100%">
    <el-table-column label="ID" prop="id" />
    <el-table-column label="用户名" prop="username" />
    <el-table-column label="头像" prop="img_path" #default="scope"  >
      <img :src="scope.row.img_path" alt=""  style="width: 100px; height: 100px;">
      </el-table-column>
      <el-table-column label="电话" prop="phone" />
      <el-table-column label="邮箱" prop="email" />
      <el-table-column label="QQ号" prop="qq" />
      <el-table-column label="状态" prop="status" #default="scope">
        <el-switch  v-model="scope.row.status" :active-value="1" :inactive-value="2"/>
        </el-table-column>
     
    <el-table-column align="right">
      
      <template #default="scope">
       
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >拉黑</el-button
        >
      </template>
    </el-table-column>
  </el-table>


        <!-- 分页 -->
        <div class="demo-pagination-block">
          <div class="demonstration">All combined</div>
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
  </div>

</template>

<style lang="less" scoped>
</style>
